<template>
	<v-dialog v-model="visible" width="800px">
		<v-card>
			<v-card-text>
				<div class="pt-5">{{ modText }}菜单</div>
			</v-card-text>
			<v-card-text>
				<v-form ref="form" @submit.prevent="">
					<v-row>
						<v-col cols="6">
							<md-tree-selector v-model="form.parentId" :rules="rules.parentId" label="上级菜单"/>
						</v-col>
						<v-col cols="6">
							<v-select v-model="form.menuType" :rules="rules.menuType" label="菜单类型" :items="menuType" item-value="key" item-text="label"/>
						</v-col>
						<v-col cols="6">
							<v-text-field v-model="form.menuName" :rules="rules.menuName" label="菜单名称"/>
						</v-col>
						<v-col cols="6" v-if="form.menuType !== 'button'">
							<v-text-field v-model="form.icon" :rules="rules.icon" label="菜单图标"/>
						</v-col>
						<v-col cols="6" v-if="form.menuType !== 'button'">
							<v-text-field v-model="form.path" :rules="rules.path" label="路径"/>
						</v-col>
						<v-col cols="6" v-if="form.menuType !== 'button'">
							<v-text-field v-model="form.name" :rules="rules.name" label="路由名称"/>
						</v-col>
						<v-col cols="6" v-if="form.menuType !== 'button'">
							<v-text-field v-model="form.component" :rules="rules.component" label="路由组件"/>
						</v-col>
						<v-col cols="6">
							<v-text-field v-model="form.perms" :rules="rules.perms" label="权限"/>
						</v-col>
						<v-col cols="4">
							<v-text-field type="number" v-model.number="form.sort" :rules="rules.sort" label="排序"/>
						</v-col>
						<v-col cols="4">
							<v-switch v-model="form.visible" :rules="rules.visible" label="是否显示"/>
						</v-col>
						<v-col cols="4">
							<v-switch v-model="form.isEnable" :rules="rules.isEnable" label="是否启用"/>
						</v-col>
					</v-row>
				</v-form>
			</v-card-text>
			<v-card-actions class="justify-end">
				<v-btn @click="visible = false">
					取消
				</v-btn>
				<v-btn color="success" :loading="confirmLoading" @click="onSave">确认</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import MdDialogMixins from '@/common/mixins/MdDialogMixins';
import MdTreeSelector from '@/components/selector/MdTreeSelector';
import MenuApi from '@/common/api/MenuApi';

export default {
	name: 'MenuCreateDialog',
	components: {MdTreeSelector},
	mixins: [MdDialogMixins],
	data() {
		return {
			rules: {
				parentId: this.$utils.formValidator(['nullable']),
				menuName: this.$utils.formValidator(['required', 'string']),
				icon: this.$utils.formValidator(['nullable', 'string']),
				activeIcon: this.$utils.formValidator(['nullable', 'string']),
				path: this.$utils.formValidator(['required', 'string']),
				name: this.$utils.formValidator(['required', 'string']),
				component: this.$utils.formValidator(['nullable', 'string']),
				perms: this.$utils.formValidator(['nullable', 'string']),
				menuType: this.$utils.formValidator(['required', 'string']),
				sort: this.$utils.formValidator('required|integer|min:0|max:9999999'.split('|')),
				visible: this.$utils.formValidator(['required', 'boolean']),
				isEnable: this.$utils.formValidator(['required', 'boolean'])
			},
			menuType: [
				{key: 'list', label: '目录'},
				{key: 'menu', label: '菜单'},
				{key: 'button', label: '按钮'}
			]
		}
	},
	methods: {
		create(data) {
			this.action({sort: 100, visible: true, isEnable: true, ...data}, 'add')
		},
		edit(row) {
			let data = this.$utils.deepCopy(row)
			delete data.children;
			this.action(data, 'edit');
		},
		onSave() {
			if (!this.$refs.form.validate()) {
				return
			}
			this.confirmLoading = true;
			let form = this.$utils.deepCopy(this.form);
			if (form.parentId === 'root') form.parentId = undefined;
			if (this.form.id) {
				MenuApi.update(this.form.id, form).then(res => {
					this.$utils.responseHandler(res).then(() => {
						this.$emit('success');
						this.visible = false;
					})
				}).finally(() => this.confirmLoading = false)
			} else {

				MenuApi.create(form).then(res => {
					this.$utils.responseHandler(res).then(() => {
						this.$emit('success');
						this.visible = false;
					})
				}).finally(() => this.confirmLoading = false)
			}
		}
	}
}
</script>

<style scoped src="">

</style>